<template>
<div>
	<themeHeader title="订单结算"></themeHeader>
	<div class="ddjs content">
		<!-- <addresscard></addresscard> -->

		<div class="ddjs-person">
			<p>
				<span><img src="http://img06.yiguoimg.com/e/web/151027/00981/171035/icon_name.png">{{addobj.name}}</span>
				<span><img src="http://img06.yiguoimg.com/e/web/151027/00981/171035/icon_tel.png" alt="">{{addobj.phone}}</span>
			</p>
			<p>地址:{{addobj.place}}</p>
			<router-link to="/address" class="ddjs-addDizhi">+</router-link>
		</div>

		<div class="list-block">
			<ul>
			  <li class="item-content item-link">		
			    <div class="item-inner">
			      	<div class="item-title">配送日期</div>
				    <div class="item-after">星期三</div>
			    </div>
			  </li>
			  <li class="item-content item-link">				
				    <div class="item-inner">
					    <div class="item-title">支付方式</div>
					    <div class="item-after">
					    	<select>
					    		<option>支付宝</option>
					    		<option>微信支付</option>
					    		<option>银行卡支付</option>
					    	</select>
					    </div>
		          	</div>
				</li>
			</ul>
			<ul>
				<li class="item-content item-link">				    
				    <div class="item-inner">
				      <div class="item-title">优惠券</div>
				      <div class="item-after"></div>
				    </div>
				</li>
				<li class="item-content item-link">				   
		            <div class="item-title label">备注：</div>
		            <div class="item-input">
		                <input type="text" placeholder="若你对订单有特殊要求，请在此填写备注">
		            </div>
				</li>
				<li>
					<img v-for="item in proList" :src="item.img" class="ddjs-proImg">
				</li>
				<li  class="item-content">商品总额<span class="ddjs-price">￥{{allPrice}}</span></li>
				<li  class="item-content">U币抵扣<span class="ddjs-price">￥0</span></li>
				<li  class="item-content">运费<span class="ddjs-price">￥0</span></li>
				<li  class="item-content">优惠金额<span class="ddjs-price">￥0</span></li>
			</ul>
		</div>
	</div>
	<div class="ddjs-commitDiv row no-gutter">
		<div class="col-60">应付:￥<span>{{allPrice}}</span></div>
		<a href="###" class="ddjs-commitBtn col-40" v-on:click="tijiaoFn">提交订单</a>
	</div>
</div>
</template>
<script type="text/javascript">
import ThemeHeader from "./../home/component/themeHeader.vue";
// import Addresscard from "./../../components/addresscard.vue";
	export default{
		components:{
			ThemeHeader,
			// Addresscard

		},
		data(){
			return{
				proList:[],
				allPrice:0,
				addobj:{},

			}
		},
		mounted(){
			 this.addobj=JSON.parse(localStorage.getItem("defaultAddress"))
			$(".cartNone").hide();
			this.proList=JSON.parse(localStorage.getItem("shopCart"))||[];
			this.allPrice=0;
			var _this=this;
			 this.proList.forEach(function(obj){
				_this.allPrice+=parseInt(obj["price"])*obj["num"];
			 });
		},
		methods:{
			tijiaoFn:function(){
				alert("提交成功")
			}
		}

		
	}
</script>
<style type="text/css">
/*联系人*/
.ddjs-person{
	background: white;
	padding: 0 1rem;
}
.ddjs-person p span {
	line-height: 2rem;
}
.ddjs-person p span img{
	width: 15px;
}
.ddjs{
	font-size: .6rem;
}
.ddjs-addDizhi{
	font-size: 1.5rem;
	color: #c8c7c7;
	position: absolute;
	top: .5rem;
	right: 1rem;
}
	.ddjs .item-content .label{
		width: 15%;
	}
	.ddjs input[type=text]{
		font-size: 0.7rem;
	}
	.ddjs .list-block{
		font-size: .6rem;
		margin: .2rem 0;
	}
	.ddjs-proImg{
		display: inline-block;
		width: 20%;
	}
	.ddjs-commitDiv{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		font-size: .7rem;
	}
	.ddjs-commitDiv div{
		background-color: white;
		line-height: 2.5rem;

	}
	.ddjs-commitDiv div span,.ddjs-price{
		color: #fb3d3d;
		font-size: .8rem;
	}
	.ddjs-commitBtn{
		background: #fb3d3d;
		text-align: center;
		line-height: 2.5rem;
		color: white;
	}
</style>
